<template>
	<view class="fullPage">
		<map id="map" :scale="scale" :latitude="latitude" :longitude="longitude" :markers="list" :show-location="false"
			@markertap="markertap" @click="mapTap" @regionchange="dragMap" style="width: 100vw;height: 100vh">
		</map>
		<!-- @regionchange="dragMap" -->
		<!-- tab栏切换 -->
		<!-- 	<view class="tab_w flex_a">
				<block v-for="item in tabList" :key="item.status">
					<view class="flex1 h80 lh80 border-r4 ft30 tac"
						:class="activeTab == item.status ? 'b-primary cf' : ''" @click="tapTab(item.status)">
						{{ item.name }}
					</view>
				</block>
			</view> -->

		<!-- 左侧的电池规则 -->
		<!-- 	<view class="aside_l flex_a column" v-show="activeTab == 1 && !markerInfoShow">
				<block v-for="item in batterySpec" :key="item.status">
					<view class="flex1 flex_aj h100 lh100 pw100 ft30 tac" :class="activeBattery == item.status ? 'b-primary cf' : ''" @click="chooseBattery(item.status)">
						{{ item.name }}
					</view>
				</block>
			</view> -->

		<!-- 右侧的功能按钮 -->
		<view class="aside_r" v-if="!markerInfoShow">

			<view class="flex_aj w120 h120 bf border-r50p border-r50p shadow" @click="reset">
				<image src="/static/ic_sx.png" mode="widthFix" style="width: 70upx;height: 70upx;">
				</image>
			</view>
		</view>

		<!-- 底部tabBar start -->
		<view class="tabBar" v-if="!markerInfoShow">
			<view class="tabBar_c flex_sb">
				<view class="tabBar_item flex_aj column" @click="tapBar(1)">
					<image :src="activeBar == 1 ? '/static/ic_gzbx_02.png' : '/static/ic_gzbx.png'" mode="widthFix"
						style="width: 48upx;height: 48upx;"></image>
					<view class="h50 lh50 ft24" :class="activeBar == 1 ? 'primary' : 'c9'">故障报修</view>
				</view>
				<view class="tabBar_item flex_aj column" @click="tapBar(2)">
					<image :src="activeBar == 2 ? '/static/ic_lxkf_02.png' : '/static/ic_lxkf.png'" mode="widthFix"
						style="width: 52upx;height: 44upx;"></image>
					<view class="h50 lh50 ft24" :class="activeBar == 2 ? 'primary' : 'c9'">联系客服</view>
				</view>

				<view class="tabBar_item flex_aj column" @click="tapBar(3)">
					<image :src="activeBar == 3 ? '/static/ic_yhzn_02.png' : '/static/ic_yhzn.png'" mode="widthFix"
						style="width: 38upx;height: 38upx;"></image>
					<view class="h50 lh50 ft24" :class="activeBar == 3 ? 'primary' : 'c9'">用户指南</view>
				</view>
			</view>
		</view>
		<!-- 底部tabBar end -->

		<!-- 设备详情 start -->
		<view class="map_c p30 bf border-r1 shadow" v-if="markerInfoShow">
			<!-- 充电 start -->
			<!-- <view v-if="markerInfo.deviceType == 3">
					<view>充电柜编号：{{ markerInfo.sn }}</view>
					<view class="h70 flex_a">
						<view class="flex1 pr24">{{ markerInfo.siteName }}</view>
						<view class="whn c9">{{ markerInfo.distance }}km</view>
					</view>
					<view class="h50">{{ markerInfo.operatorName }}</view>
					<view class="flex mb20 c9 lh40">
						<view class="flex_a w40 h30">
							<image src="/static/ic_dw_2x.png" mode="widthFix" style="width: 24upx;height: 30upx;">
							</image>
						</view>
						<view class="flex1">{{ markerInfo.address }}</view>
					</view>
					<view class="flex_sb h100 mb30 plr30 bgf5">
						<view class="flex_a">
							空闲仓位：
							<view class="green">{{ markerInfo.blankNum }}</view>
						</view>
						<view class="flex_a">
							总仓位：
							<view class="ft30">{{ markerInfo.chanelNum }}</view>
						</view>
					</view>
					<view class="h100 lh100 mb30 plr30 bgf5">
						收费标准：
						<view class="inlineB pl10 danger">
							{{ markerInfo.mealPrice }}元/{{ markerInfo.mealType == 1 ? '度' : '小时' }}
						</view>
					</view>

					<view class="h80 lh80 border-r6 b-primary tac cf tap" @click="navigation">立即导航</view>
				</view> -->
			<!-- 充电 end -->
			<!-- 租车 start -->
			<!-- 		<view v-if="markerInfo.deviceType == 2">
					<view class="h70 flex_a">
						<view class="flex1 pr24">{{ markerInfo.siteName }}</view>
						<view class="whn c9">{{ markerInfo.distance }}km</view>
					</view>
					<view class="h50">{{ markerInfo.operatorName }}</view>
					<view class="flex mb20 c9 lh40">
						<view class="flex_a w40 h30">
							<image src="/static/ic_dw_2x.png" mode="widthFix" style="width: 24upx;height: 30upx;">
							</image>
						</view>
						<view class="flex1">{{ markerInfo.address }}</view>
					</view>

					<view class="h100 lh100 mb30 plr30 bgf5 border-r1">
						可租车辆：
						<view class="inlineB green">{{ markerInfo.availableNum }} 辆</view>
					</view>

					<view class="flex_sb">
						<view class="flex1 h80 lh80 border-r6 b-primary tac cf tap" @click="navigation">立即导航
						</view>
					</view>
				</view> -->
			<!-- 租车 end -->
			<!-- 换电 start -->
			<view>
				<view>换电柜编号：{{ markerInfo.deviceNo }}</view>
				<view class="h70 flex_a">
					<view class="flex1 pr24">{{ markerInfo.operatorName }}</view>
					<view class="whn c9">{{ markerInfo.distance }}km</view>
				</view>
				<!-- <view class="h50">{{ markerInfo.operatorName }}</view> -->
				<view class="flex mb20 c9 lh40">
					<view class="flex_a w40 h30">
						<image src="/static/ic_dw_2x.png" mode="widthFix" style="width: 24upx;height: 30upx;">
						</image>
					</view>
					<view class="flex1">{{ markerInfo.address }}</view>
				</view>
				<view class="flex_sb h100 mb30 plr30 bgf5">
					<view class="flex_a">
						空闲仓位：
						<view class="green">{{ markerInfo.blankNum }}</view>
					</view>
					<view class="flex_a">
						可取仓位：
						<view class="warning">{{ markerInfo.availableNum }}</view>
					</view>
					<view class="flex_a">
						总仓位：
						<view class="ft30">{{ markerInfo.chanelNum }}</view>
					</view>
				</view>
				<view class="h80 lh80 mb30 border-r6 b-primary tac cf tap" @click="navigation">立即导航
				</view>
				<view class="flex_sb">
					<view class="flex1 h80 lh80 mr24 border-r6 b-warning tac cf tap"
						@click="routerLink({ path: '/pages/user/rentEle/package', query: { deviceId: markerInfo.id, type: 1 } })">
						租电套餐
					</view>
					<view class="flex1 h80 lh80 border-r6 b-green tac cf tap" @click="isShowBat = true">电池详情
					</view>
				</view>
				<!-- 换电 end -->
			</view>
		</view>
		<!-- 设备详情 end -->

		<!-- 电池详情 start -->
		<view class="bat_wrap flex_aj column" v-if="isShowBat">
			<view class="bat_content">
				<view class="table_th flex_a">
					<view class="flex1 tac">电池类型</view>
					<view class="flex1 tac">可取数量</view>
				</view>
				<view class="table_tr  flex_a" v-for="(item,index) in markerInfo.availableTypeMap" :key="index">
					<view class="flex1 tac">{{item.typeVt}}</view>
					<view class="flex1 tac">{{ item.count || 0 }}</view>
				</view>
				<!-- 		<view class="table_tr  flex_a">
						<view class="flex1 tac">DC60V</view>
						<view class="flex1 tac">{{ markerInfo.available_60 || 0 }}</view>
					</view>
					<view class="table_tr  flex_a">
						<view class="flex1 tac">DC72V</view>
						<view class="flex1 tac">{{ markerInfo.available_72 || 0 }}</view>
					</view> -->
			</view>
			<view class="bat_close flex_aj" @click="isShowBat = false">
				<image src="/static/ic_gb_2x.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 电池详情 end -->

	</view>
</template>

<script>
	import * as markersMock from '@/utils/markers.js'
	import {
		getPlatformInfo
	} from '@/api/public.js'
	import {
		getService,
		mapList,
		getDeviceDetail
	} from '@/api/user.js'
	export default {
		name: 'index',
		data() {
			return {
				activeBar: 0, // 1 故障报修，2 联系客服，3 用户指南
				appId: '',
				activeTab: 1, // 1:换电柜 2：租车 3：充电柜
				tabList: [], // 头部tab栏
				activeBattery: 1, // 当前选中的电池型号
				batterySpec: [{
					name: 'DC48V',
					status: 1
				}, {
					name: 'DC60V',
					status: 2
				}, {
					name: 'DV72V',
					status: 3
				}], // 电池型号列表
				scale: 14, // 地图缩放比例
				latitude: 23.12652, //23.02067
				longitude: 113.25878, //113.75179
				list: [], // 设备列表
				markerInfoShow: false, // 是否显示marker点详情
				markerInfo: {}, // marker点相亲
				isShowBat: false, // 是否显示电池详情
				mobile: ''
			}
		},
		onLoad(e) {
			// let pi = (3.14159265358979324 * 3000.0) / 180.0;
			// let x = this.longitude - 0.0065;
			// let y = this.latitude - 0.006;
			// let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
			// let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
			// this.longitude = z * Math.cos(theta);
			// this.latitude = z * Math.sin(theta);

			this.mapContext = uni.createMapContext('map')
			this.init()
		},
		onShow() {
			this.appId = my.getAppIdSync().appId //获取小程序的appid
		},
		onHide() {
			this.macno = null
		},
		computed: {
			isLogin() {
				return this.$store.state.user.isLogin
			}
		},
		methods: {
			async init() {
				// await this.getService()
				this.getLocation()

				this.getPlatformInfo()
			},
			// 获取平台信息
			async getPlatformInfo() {
				const res = await getPlatformInfo({
					appId: this.appId
				})
				console.log(222222222222, res);
				this.mobile = res.data.serverTel

			},

			async getService() {
				const res = await getService({
					appId: this.appId
				})
				const service = res.data
				const _tabList = []
				// 运营充电  1：是 2：否
				if (service.operateCd == 1) {
					_tabList.push({
						name: '充电',
						status: 3
					})
				}
				// 运营租车  1：是 2：否
				if (service.operateZc == 1) {
					_tabList.push({
						name: '租车',
						status: 2
					})
				}
				// 运营换电  1：是 2：否
				if (service.operateHd == 1) {
					_tabList.push({
						name: '换电',
						status: 1
					})
				}

				this.tabList = _tabList
				this.activeTab = _tabList[0] ? _tabList[0].status : 0
			},
			// 点击tab栏
			tapTab(status) {
				if (this.activeTab == status) {
					return false
				}
				this.markerInfoShow = false
				this.activeTab = status
				this.getList()
			},
			// 点击tabbar 栏
			tapBar(status) {
				this.activeBar = status
				if (status == 1) {
					this.routerLink({
						path: '/pages/user/kefu/fault'
					}, true)
				} else if (status == 2) {
					console.log(this.mobile.split(',')[0])
					this.confirm({
						title: '客服电话',
						content: '联系电话：' + this.mobile.split(',')[0],
						confirmText: '拨打'
					}).then(res => {
						if (res.confirm) {
							this.call(this.mobile.split(',')[0])
						}
					})
				} else if (status == 3) {
					// this.routerLink({ path: '/pages/user/service/detail', query: { type: 5 } })
					this.routerLink({
						path: '/pages/user/kefu/userguide',
						query: {
							type: 5
						}
					})
				}
			},
			async getLocation() {
				let [a, {
					latitude,
					longitude
				}] = await uni.getLocation({
					type: 'gcj02'
				})

				this.latitude = latitude
				this.longitude = longitude
				this.getList()
			},

			getList() {
				this.mapContext.removeMarkers({
					markerIds: this.list.map(item => item.id)
				})

				this.list = []
				this.mapContext.moveToLocation({
					longitude: this.longitude,
					latitude: this.latitude
				})
				this.list[0] = {
					id: -1,
					latitude: this.latitude * 1,
					longitude: this.longitude * 1,
					iconPath: '/static/ic_dqdw_2x.png',
					width: 100,
					height: 100
				}
				// if (this.tabList.length > 0) {
				this.mapList()
				// }
				// this.markersMock()
			},
			// 模拟数据
			markersMock() {
				let markers = []
				markersMock.markers.forEach((item, index) => {
					// let pi = (3.14159265358979324 * 3000.0) / 180.0;
					// let x = item.lng - 0.0065;
					// let y = item.lat - 0.006;
					// let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
					// let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
					// item.lng = z * Math.cos(theta);
					// item.lat = z * Math.sin(theta);
					markers.push({
						id: index,
						latitude: item.lat,
						longitude: item.lng,
						width: 42,
						height: 44,
						iconPath: '/static/ic_pos.png',
						title: '',
						anchor: {
							x: 0.5,
							y: 0.5
						}
					})
				})
				this.list = [...this.list, ...markers]
			},
			// 附近设备
			async mapList() {
				const res = await mapList({
					serviceType: 1,
					lat: this.latitude,
					lng: this.longitude,
					appId: this.appId
				})
				console.log(res)
				this.list = []
				res.data.forEach((item, index) => {
					const localInfo = {
						index: index,
						id: index,
						deviceId: item.id,
						/*
						title: item.name,
						macno: item.macno,
						address: item.address,
						distance: item.distance,
						is_enable: item.is_enable,
						*/
						latitude: item.lat * 1,
						longitude: item.lng * 1,
						width: 70,
						height: 70,
						iconPath: '/static/ic_sbdw_2x.png',
						anchor: {
							x: 0.5,
							y: 0.5
						}
					}
					// let pi = 3.14159265358979324 * 3000.0 / 180.0;
					//      let  x = Number(localInfo.longitude- 0.0065) 
					//      let y = Number( localInfo.latitude- 0.006)
					//      let z = Number(Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi))
					//      let theta = Number(Math.atan2(y, x) - 0.000003 * Math.cos(x * pi))
					//      localInfo.longitude  = Number(z * Math.cos(theta))
					//      localInfo.latitude  = Number(z * Math.sin(theta))
					this.list.push(localInfo)
				})
				// this.markerInfo = this.list[1]
			},

			// 获取设备详情
			async getDeviceDetail(index) {
				console.log(index)
				// let pi = (3.14159265358979324 * 3000.0) / 180.0;
				// let x = this.longitude - 0.0065;
				// let y = this.latitude - 0.006;
				// let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
				// let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
				// this.longitude = z * Math.cos(theta);
				// this.latitude = z * Math.sin(theta);
				const res = await getDeviceDetail({
					serviceType: 1,
					lat: this.latitude,
					lng: this.longitude,
					id: this.list[index].deviceId
				})
				this.markerInfoShow = true
				res.data.index = index
				this.markerInfo = res.data
			},
			markertap(e) {
				console.log(e)
				console.log(this.list)
				if (e.detail.markerId < 0) {
					return false
				}

				// if (this.markerInfo.id == this.list[e.detail.markerId + 1].deviceId) {
				// 	this.markerInfoShow = true
				// 	return false
				// }
				this.markerInfoShow = true
				this.getDeviceDetail(Number(e.detail.markerId))
			},
			dragMap(e) {
				// 注意：支付宝小程序 如果缩小或者放大了地图比例尺以后，请在 onRegionChange 函数中重新设置 data 的
				// scale 值，否则会出现拖动地图区域后，重新加载导致地图比例尺又变回缩放前的大小。
				// #ifdef MP-ALIPAY
				// console.log(e)
				// console.log(e.scale)
				// this.scale = e.scale
				// // 获取当前地图中心的经纬度
				// this.mapContext.getCenterLocation({
				// 	success: res => {
				// 		console.log(res.longitude)
				// 		console.log(res.latitude)

				// 		this.latitude = res.latitude
				// 		this.longitude = res.longitude
				// 	},
				// 	fail: err => {
				// 		console.log(err)
				// 	}
				// })
				// #endif
				console.log('地图被拖动4')
				this.markerInfoShow = false
			},
			mapTap() {
				console.log('地图被点击')
				// this.markerInfoShow = false
			},

			reset() {
				this.scale = 14
				this.mapContext.moveToLocation({
					latitude: this.latitude,
					longitude: this.longitude
				})
				this.getLocation()
			},
			scanCode() {
				const _self = this

				this.routerLink({}, true, () => {
					uni.scanCode({
						scanType: ['barCode', 'qrCode'],
						success(res) {
							if (res.errMsg == 'scanCode:ok') {
								let deviceNo = ''
								let deviceType = 0
								if (res.scanType == 'QR_CODE') {
									// http://weixin.qq.com/r/test?deviceNo=131211&deviceType=1
									// deviceType设备类型 1:换电柜 2：租车 3：充电柜
									deviceNo = _self.getUrlParam('deviceNo', res.result)
									deviceType = _self.getUrlParam('deviceType', res.result)
								}
								if (deviceNo) {
									_self.goUsePage(deviceNo, deviceType)
								} else {
									_self.toast('请扫描正确的二维码')
								}
							}
						},
						fail(err) {
							console.log(err)
						}
					})
				})
			},

			navigation() {
				console.log('markerInfo')
				console.log(this.markerInfo)
				// let lng = this.markerInfo.lng
				// let lat = this.markerInfo.lat
				// let pi = (3.14159265358979324 * 3000.0) / 180.0;
				// let x = lng - 0.0065;
				// let y = lat - 0.006;
				// let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
				// let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
				// lng = z * Math.cos(theta);
				// lat = z * Math.sin(theta);
				uni.openLocation({
					latitude: this.markerInfo.lat * 1,
					longitude: this.markerInfo.lng * 1,
					name: this.markerInfo.address,
					address: this.markerInfo.address,
					success: () => {
						this.markerInfoShow = false
					}
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.inlineB {
		display: inline-block;
		vertical-align: middle;
		white-space: nowrap;
	}

	view {
		overflow: auto;
		white-space: normal;
	}

	.tab_w {
		position: fixed;
		top: 30upx;
		left: 26upx;
		width: 698upx;
		height: 100upx;
		padding: 10upx 14upx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 50upx;
		overflow: hidden;
		box-shadow: 0px 4px 18px 0px rgba(50, 130, 255, 0.24);
	}

	.aside_l {
		position: fixed;
		bottom: 330upx;
		left: 26upx;
		width: 160upx;
		height: 300upx;
		background: #ffffff;
		box-shadow: 0upx 4upx 18upx 0upx rgba(50, 130, 255, 0.24);
		border-radius: 20upx;
		overflow: hidden;
	}

	.aside_r {
		position: fixed;
		bottom: 360upx;
		right: 26upx;
	}

	// 底部tabbar
	.tabBar {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 210upx;

		.tabBar_scan {
			position: absolute;
			top: 0;
			left: 50%;
			z-index: 2;
			transform: translateX(-50%);
		}

		.tabBar_c {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 150upx;
			padding: 20upx 80upx;
			box-sizing: border-box;
			background: #ffffff;
			box-shadow: 1upx -14upx 20upx 0upx rgba(50, 130, 255, 0.1);
			border-radius: 50upx 50upx 0upx 0upx;

			.tabBar_item {
				// flex: 1;
				width: 140upx;
			}
		}
	}

	.map_c {
		position: fixed;
		bottom: 60upx;
		left: 30upx;
		width: 690upx;
		box-sizing: border-box;
	}

	.bat_wrap {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba($color: #000000, $alpha: 0.4);

		.bat_content {
			width: 600upx;
			min-height: 462upx;
			padding: 40upx 30upx;
			margin-bottom: 30upx;
			background-color: #fff;
			border-radius: 10px;

			.table_th {
				height: 50upx;
				line-height: 50upx;
				background: #deeafd;
			}

			.table_tr {
				height: 60upx;
				line-height: 60upx;
				background: #f7faff;
			}
		}

		.bat_close {
			width: 60upx;
			height: 60upx;

			&:active {
				opacity: 0.8;
			}
		}
	}
</style>